<template>
  <div class="g-bg">
    <div class="g-polygon-1"></div>
    <div class="g-polygon-2"></div>
    <div class="g-polygon-3"></div>
    <div class="g-polygon-4"></div>
    <div class="g-polygon-5"></div>

    <div class="content-container">
      <div class="box">
        <!--1.左侧背景  -->
        <loginBackground></loginBackground>
        <!-- 2.右侧所有登录注册功能 -->
        <login :chooseType="status"></login>
      </div>
    </div>
  </div>
</template>

<script>
import login from "@/components/login.vue";
import loginBackground from "@/components/loginBackground.vue";
export default {
  name: "LoginPage",
  components: {
    login,
    loginBackground,
  },
  data() {
    return {
      status: "",
    };
  },

  created() {
    this.status = this.$route.query.status; // 从其他页面来到此页面时，传递的参数
  },
};
</script>

<style scoped lang="less">
.g-bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;

  .content-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74rem;
    /* 宽度为 72rem */
    height: 40rem;
    /* 高度为 52rem */
    z-index: 10;
    /* 保证在背景之上 */
    border-radius: 1.25rem;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* 阴影效果 */
    opacity: 0.9;
    transition: box-shadow 0.1s linear;

    /* 添加过渡效果 */
    &:hover {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    }

    .box {
      width: 100%;
      height: 100%;
      border-radius: 1.25rem;
      display: flex;
      justify-content: space-between;
      position: relative;
      .fullbgc {
        pointer-events: none;
        /* 禁用鼠标事件 */
        user-select: none;
        /* 禁用选择事件 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        position: absolute;
        top: 0;
        left: -40%;
        z-index: 1;
        /* 向左移动50% */
        width: auto;
        height: 100%;
        min-width: 100%;
        /* 确保宽度至少等于父容器宽度 */
      }
    }
  }

  & > div {
    position: absolute;
    opacity: 0.5;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    backdrop-filter: blur(250px);
    z-index: 1;
  }
}

.g-polygon-1 {
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 714px;
  height: 390px;
  background: linear-gradient(#ffee55, #fdee99);
  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}

.g-polygon-2 {
  bottom: 0px;
  left: 30%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 450px;
  background: linear-gradient(-36deg, #e950d1, #f980d9);
  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-3 {
  bottom: 0px;
  left: 70%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 450px;
  background: rgba(87, 80, 233);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-4 {
  top: 0px;
  left: 60%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 450px;
  background: linear-gradient(#e01e52, #88c811);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-5 {
  top: 0px;
  left: 20%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 450px;
  background: linear-gradient(#311884, #ad7712);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}
</style>
